<script setup>
import { ref, onMounted } from 'vue'
import Modal from '@/components/Modal.vue'
import Upload from '@/components/Upload.vue'
import AntIcon from '@/components/AntdIcon/index.vue'
import { projectAreaListApi, addProjectApi, updateProjectApi } from '@/service'

const emit = defineEmits(['addProject'])
const modalRef = ref()
const formRef = ref()
const formData = ref({
  project_title: '', // 项目标题
  project_intro: '', // 项目简介
  project_image_url_1: '', // 项目图片1
  project_image_url_2: '', // 项目图片2
  project_handle_cycle: '', // 办理周期
  project_obtain_identity: '', // 获得身份
  project_asset_requirements: '', // 资产要求
  project_apply_conditions: '', // 申请条件
  project_apply_process: [], // 申请流程
  is_hot: 1, // 是否热门 0.否 1.是
  project_area_id: null, // 项目地区id
})
const rules = {
  project_title: [{ required: true, message: '请输入项目标题' }],
  project_intro: [{ required: true, message: '请输入项目简介' }],
  project_image_url_1: [{ required: true, message: '请上传项目图片1' }],
  project_image_url_2: [{ required: true, message: '请上传项目图片2' }],
  project_handle_cycle: [{ required: true, message: '请输入办理周期' }],
  project_obtain_identity: [{ required: true, message: '请输入获得身份' }],
  project_asset_requirements: [{ required: true, message: '请输入资产要求' }],
  project_apply_conditions: [{ required: true, message: '请输入申请条件' }],
  project_area_id: [{ required: true, message: '请输入申请流程' }],
  is_hot: [{ required: true, message: '请选择是否热门' }],
}
// 项目地区列表
const projectAreaList = ref([])

// 获取项目地区列表
const getProjectAreaList = () => {
  projectAreaListApi().then((res) => {
    const keys = Object.keys(res)
    keys.forEach((item) => {
      projectAreaList.value.push(...res[item])
    })
  })
}

// 上传图片
const upload = ({ download_url }, index) => {
  formData.value[`project_image_url_${index}`] = download_url
}

const submit = () => {
  const { project_id } = formData.value
  formRef.value.validate().then(() => {
    if (project_id) {
      updateProjectApi(formData.value).then(() => {
        emit('addProject')
        close()
      })
    } else {
      addProjectApi(formData.value).then(() => {
        emit('addProject')
        close()
      })
    }
  })
}

const open = (params) => {
  if (params) {
    formData.value = params
  }
  modalRef.value.open()
}

const close = () => {
  formData.value = {
    project_title: '',
    project_intro: '',
    project_image_url_1: '',
    project_image_url_2: '',
    project_handle_cycle: '',
    project_obtain_identity: '',
    project_asset_requirements: '',
    project_apply_conditions: '',
    project_apply_process: [],
    is_hot: 1,
    project_area_id: null,
    asset_config_url: '',
    asset_config_title: '',
    asset_config_content: '',
  }
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
onMounted(() => {
  getProjectAreaList()
})
</script>
<template>
  <Modal ref="modalRef" :title="formData?.project_id ? '编辑项目' : '创建项目'" @cancel="close">
    <a-form ref="formRef" :model="formData" :rules="rules" autocomplete="off">
      <a-form-item label="项目标题" name="project_title">
        <a-input v-model:value="formData.project_title" placeholder="请输入项目标题">
          <template #prefix> <AntdIcon icon="ProjectOutlined" /> </template>
        </a-input>
      </a-form-item>
      <div class="flex gap-3">
        <a-form-item label="图片1" name="project_image_url_1" class="flex-1">
          <div class="flex items-center gap-5">
            <div class="flex flex-col items-center gap-2">
              <a-image
                :width="150"
                :src="formData.project_image_url_1"
                v-if="formData.project_image_url_1"
              />
              <span class="text-[#999]">推荐尺寸: 500*300 (5:3)</span>
            </div>
            <Upload @uploadSuccess="upload($event, 1)">
              <div
                class="size-10 rounded-[6px] flex items-center justify-center border border-[#eee] cursor-pointer hover:text-[#1677ff] hover:border-[#1677ff]"
              >
                <AntIcon
                  :icon="
                    formData?.project_id || formData.project_image_url_2
                      ? 'EditOutlined'
                      : 'PlusOutlined'
                  "
                  size="20px"
                />
              </div>
            </Upload>
          </div>
        </a-form-item>
        <a-form-item label="图片2" name="project_image_url_2" class="flex-1">
          <div class="flex items-center gap-5">
            <div class="flex flex-col items-center gap-2">
              <a-image
                :width="150"
                :src="formData.project_image_url_2"
                v-if="formData.project_image_url_2"
              />
              <span class="text-[#999]">推荐尺寸: 500*300 (5:3)</span>
            </div>
            <Upload @uploadSuccess="upload($event, 2)">
              <div
                class="size-10 rounded-[6px] flex items-center justify-center border border-[#eee] cursor-pointer hover:text-[#1677ff] hover:border-[#1677ff]"
              >
                <AntIcon
                  :icon="
                    formData?.project_id || formData.project_image_url_2
                      ? 'EditOutlined'
                      : 'PlusOutlined'
                  "
                  size="20px"
                />
              </div>
            </Upload>
          </div>
        </a-form-item>
      </div>
      <a-form-item label="项目简介" name="project_intro">
        <textarea
          class="outline-0 border border-[#eee] p-3 rounded-[6px] w-full h-20"
          v-model="formData.project_intro"
          placeholder="请输入内容"
        />
      </a-form-item>
      <a-form-item label="办理周期" name="project_handle_cycle">
        <a-input v-model:value="formData.project_handle_cycle" placeholder="请输入办理周期" />
      </a-form-item>
      <a-form-item label="获得身份" name="project_obtain_identity">
        <a-input v-model:value="formData.project_obtain_identity" placeholder="请输入身份" />
      </a-form-item>
      <a-form-item label="资产要求" name="project_asset_requirements">
        <a-input
          v-model:value="formData.project_asset_requirements"
          placeholder="请输入资产要求"
          show-count
          :maxlength="30"
        />
      </a-form-item>
      <a-form-item label="申请条件" name="project_apply_conditions">
        <textarea
          class="outline-0 border border-[#eee] p-3 rounded-[6px] w-full h-20"
          v-model="formData.project_apply_conditions"
          placeholder="请输入申请条件"
        />
      </a-form-item>
      <a-form-item label="所在地区" name="project_area_id">
        <a-select v-model:value="formData.project_area_id" placeholder="请选择地区">
          <a-select-option v-for="item in projectAreaList" :key="item.id" :value="item.id">
            {{ item.project_area_name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="是否热门" name="is_hot">
        <a-switch
          v-model:checked="formData.is_hot"
          :checkedValue="1"
          :unCheckedValue="0"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <div class="flex justify-end gap-5">
        <a-button type="primary" @click="submit">提交</a-button>
        <a-button @click="close">取消</a-button>
      </div>
    </a-form>
  </Modal>
</template>
